import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login.vue'
import Home from '@/components/Home.vue'
// import reports from '@/components/reports/reports.vue'
// import orders from '@/components/orders/orders.vue'
// const orders = () => import(`@/components/orders/orders.vue`)

import {getMenus} from '@/api'


import store from '@/store'

Vue.use(Router)

const router =  new Router({
  // mode:'history',
  routes: [
    {
      path:'/',
      redirect:'/login'
    },
    {
      path:'/login',
      component: Login
    },
    {
      path:'/home',
      component:Home,
      children:[
        // {
        //   path:'/users',
        //   component:Users
        // }
        // {
        //   path:'/orders',
        //   component:orders
        // }
      ]
      // 路由独享守卫,只会对当前这一个路由规则进行拦截
      // beforeEnter: (to, from, next) => {
      //   // next()
      //   const token = localStorage.getItem('token')
      //   if(token){
      //     next()
      //   }else{
      //     next('/login')
      //   }
      // }
    }
  ]
})

store.state.menus.forEach(v=>{
  v.children.forEach(item=>{
    console.log(item.path)
    let route = {}
    route.path = '/' + item.path
    // 使用路由懒加载拼接路由路径获取组件
    route.component = () => import(`@/components/${v.path}/${item.path}.vue`)
    router.options.routes[2].children.push(route)
  })
})
router.addRoutes(router.options.routes)



// if(store.state.routes.length !== 0){
//   console.log(store.state.routes,333)
//   router.addRoutes(store.state.routes)
// }

// {
//   path:'',
//   component:
// }

// 1. 登录成功之后获取该用户对应的权限菜单
// 1.0 使用actions发送获取权限菜单的请求
// 1.1 获取权限菜单成功后将权限菜单的数据保持到vuex中
// 1.2 在需要设置动态路由规则时从vuex中获取菜单列表数据进行组装添加

// 2. 根据这个权限菜单数组组装出需要的路由规则
// 3. 需要遍历权限菜单列表,找到对应的路由路径path,再根据path拼接扎到项目中对应的组件
// 4. 将组装好的路由规则对象push到router.options.routes
// 5. 调用router.addRoutes(router.options.routes)

// 实现动态权限菜单:根据请求动态获取菜单列表，组装成对应的路由规则,然后通过router.addRoutes
// 方法动态添加路由规则

// console.log(router)
// const orders_route = {
//   path:'/orders',
//   component:() => import(`@/components/orders/orders.vue`)
// }

// router.options.routes[2].children.push(orders_route)
// router.addRoutes(router.options.routes)
// console.log(router)

// getMenus().then(res=>{
//   console.log(res,'权限菜单列表')
//   res.forEach(v=>{
//     v.children.forEach(item=>{
//       console.log(item.path)
//       let route = {}
//       route.path = '/' + item.path
//       // 使用路由懒加载拼接路由路径获取组件
//       route.component = () => import(`@/components/${v.path}/${item.path}.vue`)
//       router.options.routes[2].children.push(route)
//     })
// })
//   router.addRoutes(router.options.routes)
//   console.log(router)
// })
































// console.log(router)
// const orders_route = {
//   path:'/orders',
//   component:orders
// }

// router.options.routes[2].children.push(orders_route)
// console.log(router)

// // addRoutes动态添加路由
// router.addRoutes(router.options.routes)

// 需求:用户没有登录的情况下,如果访问的是需要登录后才能进入的页面,这个时候需要重新跳转到
// 登录页面;如果用户已经登录,那么可以访问任何页面

// 路由拦截:在路由跳转时会执行路由的钩子函数,其中有一个叫
// 全局守卫的作用就是拦截路由跳转,所有的跳转都必须经过这个守卫的同意

// 只要是路由跳转都会执行beforeEach函数
// router-link
// this.$router.push()
// 直接修改url地址
// next('/home')

router.beforeEach((to,from,next)=>{
//   // console.log(to,from)
//   // to 要进入的路由对象
//   // from 要离开的路由对象
//   // next用于放行路由，在该函数中一定要执行next

//   // 如果没有登录而且访问的是非登录页面,需要拦截下来让其跳转到登录
//   // 如果已经登录,直接放行
//   // 如果访问的就是登录,直接放行
  const token = localStorage.getItem('token')
  
  if(token){
    // token存在表示用户已经登录,可以访问任意页面
    next()
  }else{
    // token不存在表示用户还没有登录,此时需要重新跳转到登录界面
    if(to.path === '/login'){
      next()
    }else{
      next('/login')
    }
    next('/login')
  }
})

// 访问/home 执行beforeEach
// next('/login') ===> 访问 /login路由 ==》 执行beforeEach
// next('/login') ===> 访问 /login路由 ==》 执行beforeEach

export default router















// var path = 'goods'
// router.options.routes[2].children.push({
//   path:'/goods',
//   component:() => import(`@/components/${path}/${path}.vue`)
// })
// router.addRoutes(router.options.routes)
// console.log(router)